<template>
	<div v-if="isVip" class="simple-vip-badge">
		<span class="vip-text">VIP</span>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import dayjs from 'dayjs'
import ACCESS_ENUM from '@/access/accessEnum';

interface Props {
	vipExpireTime?: string
	userRole?: string
}

const props = defineProps<Props>()

// 简单判断是否为VIP用户
const isVip = computed(() => {
	// 管理员算作VIP
	if (props.userRole === ACCESS_ENUM.ADMIN) return true

	// 检查VIP到期时间
	if (!props.vipExpireTime) return false

	const expireTime = dayjs(props.vipExpireTime)
	return expireTime.isAfter(dayjs())
})
</script>

<style scoped lang="scss">
.simple-vip-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 6px;
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);

	.vip-text {
		font-size: 10px;
		font-weight: bold;
		color: #8b4513;
		letter-spacing: 0.5px;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
	}
}
</style>
